<template>
  <el-dialog :title="title" :visible.sync="visible" width="1200px" append-to-body>
    <el-form ref="form" inline :model="form" :rules="rules" label-width="170px">
      <!--  基础信息    -->
      <el-form-item label="供应商名称" prop="supplierName">
        <el-input
          v-model="form.supplierName"
          placeholder="请输入供应商名称"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="投诉负责人" prop="complaintHeader">
        <el-input
          v-model="form.complaintHeader"
          placeholder="请输入投诉负责人"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="投诉电话" prop="complaintTel">
        <el-input
          v-model="form.complaintTel"
          placeholder="请输入投诉电话"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="旅行社" prop="travelAgency">
        <el-input
          v-model="form.travelAgency"
          placeholder="请输入旅行社"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="许可证" prop="permitCard">
        <el-input
          v-model="form.permitCard"
          placeholder="请输入许可证"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="签约时效" prop="endDate">
        <el-date-picker
          v-model="form.endDate"
          placeholder="请选择签约时效"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          style="width: 240px"
        />
      </el-form-item>

      <div class="titleDiv">联系人信息</div>
      <el-divider/>
      <el-button size="small" type="primary"
                 icon="el-icon-plus"
                 @click="addContract">
        添加联系人
      </el-button>
      <div class="gx-page-fix-pad"></div>
      <el-table
        :data="form.contractList"
        style="width: 100%">
        <el-table-column prop="lineOneId" label="线路" width="300">
          <template slot-scope="scope">
          <el-select prop="lineOneId" filterable v-model="scope.row.lineOneId" placeholder="一级线路" clearable @change="(val)=>lineOnchange(val,scope.$index)">
            <el-option v-for="dict in oneLine" :key="dict.id" :label="dict.typeName" :value="dict.id" />
          </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="lineOneId" label="" width="300">
          <template slot-scope="scope">
            <el-select filterable v-model="scope.row.lineTwoId" placeholder="二级线路">
              <el-option v-for="dict in scope.row.lineTwoList" :key="dict.id" :label="dict.typeName" :value="dict.id" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="lineHeader" label="线路负责人" width="180">
          <template slot-scope="scope">
            <el-input prop="lineHeader" v-model="scope.row.lineHeader" clearable style="width: 240px"/>
          </template>
        </el-table-column>
        <el-table-column prop="headerTel" label="联系电话">
          <template slot-scope="scope">
            <el-input prop="headerTel" v-model="scope.row.headerTel" clearable style="width: 240px"/>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text"
                       icon="el-icon-delete"
                       @click="handleDelete(scope.$index)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {add, getById, updateById} from "@/api/system/supplier";
import {selectByCode} from "@/api/tool/public";
import {pageList as linePageList} from "@/api/system/line"
import {joinData} from "@/utils";

export default {
  name: "create",
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      visible: false,
      // 表单参数
      form: {
        "id":'',
        "supplierName": "",
        "complaintHeader": "",
        "complaintTel": "",
        "travelAgency": "",
        "permitCard": "",
        "endDate": "",
        "contractList": [
          {
            lineOneId:'',
            lineTwoId:'',
            lineHeader:'',
            headerTel:'',
            lineTwoList:[],
          }
        ]
      },
      autoConfirmFlag: [],
      // 表单校验
      rules: {
        storeName: [
          {required: true, message: "门市部名称不能为空", trigger: "blur"}
        ]
      },
      oneLine:[],
      lineVo:{
        "parentId":0
      }
    }
  },
  created() {
    this.getOneLine(this.lineVo).then(response=>{
      this.oneLine=response.rows
    });;
  },
  methods: {
    deleteTr(index){
      this.tableData.splice(index,1)
    },
    open(id) {
      if (id) {
        getById(id).then(response => {
          this.visible = true
          this.$nextTick(() => {
            this.form = response.data
            this.form.endDate = joinData(this.form.endDate)
            this.form.contractList.forEach((item,index) => {
              this.getOneLine({"parentId":item.lineOneId}).then(response=>{
                this.$set(this.form.contractList[index], 'lineTwoList', response.rows)
              })
            })
          })
          this.title = "修改供应商"
        })
      } else {
        this.visible = true
        this.$nextTick(() => {
          this.reset()
        })
        this.title = "新增供应商"
      }
    },
    lineOnchange(event,index){
      this.getOneLine({"parentId":event}).then(response=>{
        this.form.contractList[index].lineTwoList=response.rows
        this.form.contractList[index].lineTwoId=''
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != '') {
            updateById(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.visible = false
              this.$parent.getList()
            })
          } else {
            add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.visible = false
              this.$parent.getList()
            })
          }
        }
      })
    },
    getOneLine(vo){
      return linePageList(vo);
    },
    /** 删除按钮操作 */
    handleDelete(index) {
      this.form.contractList.splice(index, 1);
    },
    addContract() {
      let contract={
        lineOneId:'',
        lineTwoId:'',
        lineHeader:'',
        headerTel:'',
        lineTwoList:[],
      }
      this.form.contractList.push(contract);
    },
    // 取消按钮
    cancel() {
      this.visible = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.$refs.form.resetFields()
    },
  }
}
</script>
<style lang="scss" scoped>
.titleDiv{
  color: #1E5494;
  margin-left: 30px;
}
</style>
